<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>愤怒的小鸟简易版</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        #game-container {
            position: relative;
            width: 800px;
            height: 600px;
            border: 1px solid #000;
            background-color: #fff;
        }

        #bird {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: yellow;
            border-radius: 50%;
            left: 50px;
            bottom: 50px;
        }

        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div id="game-container">
        <div id="bird"></div>
        <div id="score">Score: 0</div>
    </div>
    <script>
        const bird = document.getElementById('bird');
        const scoreElement = document.getElementById('score');
        let score = 0;

        // 模拟小鸟发射
        function launchBird() {
            bird.style.left = '300px';
            bird.style.bottom = '200px';
            score += 10;
            scoreElement.textContent = `Score: ${score}`;

            // 发送分数到服务器
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'save_score.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            };
            xhr.send(`score=${score}`);
        }

        // 点击游戏容器发射小鸟
        document.getElementById('game-container').addEventListener('click', launchBird);
    </script>
</body>

</html>